﻿<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- Latest Bootstrap min CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css">
    <!-- Dropdownhover CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap-dropdownhover.min.css" type="text/css">
    <!-- latest fonts awesome -->
    <link rel="stylesheet" href="assets/font/css/font-awesome.min.css" type="text/css">
    <!-- simple line fonts awesome -->
    <link rel="stylesheet" href="assets/simple-line-icon/css/simple-line-icons.css" type="text/css">
    <!-- stroke-gap-icons -->
    <link rel="stylesheet" href="assets/stroke-gap-icons/stroke-gap-icons.css" type="text/css">
    <!-- Animate CSS -->
    <link rel="stylesheet" href="assets/css/animate.min.css" type="text/css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="assets/css/style.css" type="text/css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="assets/css/slider.css" type="text/css">
    <!--  baguetteBox -->
    <link rel="stylesheet" href="assets/css/baguetteBox.css">
    <!-- Owl Carousel Assets -->
    <link href="assets/owl-carousel/owl.carousel.css" rel="stylesheet">
    <link href="assets/owl-carousel/owl.theme.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<!-- 导入页眉 -->
<div class="header"></div>
<section class="shopping-cart">
    <!-- .shopping-cart -->
    <div class="container">
        <div class="row" id="app">
            <div class="col-md-12">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">Library</li>
                </ol>
            </div>
            <div class="col-md-6 contact-info">
                <div class="contact-form">
                    <form action="#" method="post" id="commentform" class="commentMapper-form">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="contact-bg">
                                    <h2>联系我们</h2>
                                    <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming
                                        id quod mazim placerat facer possim assum.
                                    </p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="lable">姓名 <span>*</span></div>
                                <p class="commentMapper-form-author">
                                    <input id="author" name="author" v-model:value="name" size="30" type="text">
                                </p>
                            </div>
                            <div class="col-md-6">
                                <div class="lable">邮箱 <span>*</span></div>
                                <p class="commentMapper-form-email">
                                    <input id="email" name="email" v-model:value="email" size="30" type="text">
                                </p>
                            </div>
                            <div class="col-md-12">
                                <div class="lable">意见 <span>*</span></div>
                                <p class="commentMapper-form-commentMapper">
                                    <textarea id="commentMapper" name="commentMapper" cols="45" rows="8" placeholder="Comment"
                                              aria-required="true" v-model:data-value="contact"></textarea>
                                </p>
                            </div>
                            <div class="col-sm-12 col-sm-offset-4">
                                <p class="form-submit">
                                    <!--<input name="submit" id="submit" class="btn btn-secondary" value="提交"
                                           type="submit" @click="submit">-->
                                    <button name="submit" id="submit" class="btn btn-danger btn-lg"
                                            type="submit" @click="submitComment">提交
                                    </button>
                                </p>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-md-6 contact-info">
                <div class="map">
                    <!--  map  -->
                    <!-- The element that will contain our Google Map. This is used in both the Javascript and CSS above. -->
                    <div id="map"></div>
                    <h1>map</h1>
                    <!--  m/ap  -->
                </div>
                <div class="col-md-12">
                    <div class="contact-bg">
                        <h2>联系我们</h2>
                        <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
                            placerat facer possim assum.</p>
                    </div>
                </div>
                <div class="col-sm-3 col-md-6">
                    <div class="contact-bg">
                        <h6>办公室地址</h6>Urip Sumoharjo 123 Bukir Pasuruan, INA.
                    </div>
                </div>
                <div class="col-sm-3 col-md-6">
                    <div class="contact-bg">
                        <h6>邮箱地址 </h6>info@website.com<br>www.website.com
                    </div>
                </div>
                <div class="col-sm-3 col-md-6">
                    <div class="contact-bg">
                        <h6>联系电话</h6>1 234 567 890<br>9 876 543 210
                    </div>
                </div>
                <div class="col-sm-3 col-md-6">
                    <div class="contact-bg">
                        <h6>办公时间</h6>
                        周一到周六: 早上9点 到 下午9点<br/>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /.shopping-cart -->
</section>
<!-- newsletter -->
<!-- 导入页脚 -->
<div class="footer"></div>
<!-- sticky-socia -->
<aside id="sticky-social">
    <ul>
        <li><a href="#" class="fa fa-facebook" target="_blank"><span><i class="fa fa-facebook" aria-hidden="true"></i> Facebook</span></a>
        </li>
        <li><a href="#" class="fa fa-twitter" target="_blank"><span><i class="fa fa-twitter" aria-hidden="true"></i> Twitter</span></a>
        </li>
        <li><a href="#" class="fa fa-rss" target="_blank"><span><i class="fa fa-rss" aria-hidden="true"></i> RSS</span></a>
        </li>
        <li><a href="#" class="fa fa-pinterest-p" target="_blank"><span><i class="fa fa-pinterest-p"
                                                                           aria-hidden="true"></i> Pinterest</span></a>
        </li>
        <li><a href="#" class="fa fa-share-alt" target="_blank"><span><i class="fa fa-share-alt" aria-hidden="true"></i> Flickr</span></a>
        </li>
    </ul>
</aside>
<!-- /sticky-socia -->
<p id="back-top"><a href="#top"><i class="fa fa-chevron-up" aria-hidden="true"></i></a></p>
<script src="assets/js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-dropdownhover.min.js"></script>
<!-- Plugin JavaScript -->
<script src="assets/js/jquery.easing.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<!-- owl carousel -->
<script src="assets/owl-carousel/owl.carousel.js"></script>
<!--====== Vue js ======-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--====== http util js ======-->
<script src="assets/js/util/http-util.js"></script>
<!--  Custom Theme JavaScript  -->
<script src="assets/js/filter-price.js"></script>
<script src="assets/js/custom.js"></script>
<!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery.googlemap/1.5.1/jquery.googlemap.min.js"></script>-->
<script src="http://ditu.google.cn/maps/api/js?key=AIzaSyCO2fJ8DfdyKRIvmxp96MAG6BeNiCX27lQ&callback=initMap"></script>
<!--====== Vue js ======-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--====== http util js ======-->
<script src="assets/js/util/http-util.js"></script>

<script type="text/javascript">
    // When the window has finished loading create our google map below
    google.maps.event.addDomListener(window, 'load', init);

    function init() {
        // Basic options for a simple Google Map
        // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
        var mapOptions = {
            // How zoomed in you want the map to start at (always required)
            zoom: 11,
            scrollwheel: false,
            // The latitude and longitude to center the map (always required)
            center: new google.maps.LatLng(40.6700, -73.9400), // New York

            // How you would like to style the map.
            // This is where you would paste any style found on Snazzy Maps.
            styles: [{
                "featureType": "water",
                "elementType": "geometry",
                "stylers": [{"color": "#e9e9e9"}, {"lightness": 17}]
            }, {
                "featureType": "landscape",
                "elementType": "geometry",
                "stylers": [{"color": "#f5f5f5"}, {"lightness": 20}]
            }, {
                "featureType": "road.highway",
                "elementType": "geometry.fill",
                "stylers": [{"color": "#ffffff"}, {"lightness": 17}]
            }, {
                "featureType": "road.highway",
                "elementType": "geometry.stroke",
                "stylers": [{"color": "#ffffff"}, {"lightness": 29}, {"weight": 0.2}]
            }, {
                "featureType": "road.arterial",
                "elementType": "geometry",
                "stylers": [{"color": "#ffffff"}, {"lightness": 18}]
            }, {
                "featureType": "road.local",
                "elementType": "geometry",
                "stylers": [{"color": "#ffffff"}, {"lightness": 16}]
            }, {
                "featureType": "poi",
                "elementType": "geometry",
                "stylers": [{"color": "#f5f5f5"}, {"lightness": 21}]
            }, {
                "featureType": "poi.park",
                "elementType": "geometry",
                "stylers": [{"color": "#dedede"}, {"lightness": 21}]
            }, {
                "elementType": "labels.text.stroke",
                "stylers": [{"visibility": "on"}, {"color": "#ffffff"}, {"lightness": 16}]
            }, {
                "elementType": "labels.text.fill",
                "stylers": [{"saturation": 36}, {"color": "#333333"}, {"lightness": 40}]
            }, {"elementType": "labels.icon", "stylers": [{"visibility": "off"}]}, {
                "featureType": "transit",
                "elementType": "geometry",
                "stylers": [{"color": "#f2f2f2"}, {"lightness": 19}]
            }, {
                "featureType": "administrative",
                "elementType": "geometry.fill",
                "stylers": [{"color": "#fefefe"}, {"lightness": 20}]
            }, {
                "featureType": "administrative",
                "elementType": "geometry.stroke",
                "stylers": [{"color": "#fefefe"}, {"lightness": 17}, {"weight": 1.2}]
            }]
        };

        // Get the HTML DOM element that will contain your map
        // We are using a div with id="map" seen below in the <body>
        var mapElement = document.getElementById('map');

        // Create the Google Map using our element and options defined above
        var map = new google.maps.Map(mapElement, mapOptions);

        // Let's also add a marker while we're at it
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(40.6700, -73.9400),
            map: map,
            title: 'Snazzy!'
        });
    }
</script>
</body>

</html>
<script type="text/javascript">
    //在js中引入页眉页脚
    $(document).ready(function () {
        $('.header').load('header.html');
        $('.footer').load('footer.html');
    });
</script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            email: '',
            contact: '',
        },
        methods: {
            submitComment: function () {
                let thisObj = this;
                console.log(thisObj.name);
                console.log(thisObj.email);
                console.log(thisObj.contact);
                let url = "commentSubmit";
                let name = thisObj.name;
                let email = thisObj.email;
                let contact = thisObj.contact;
                let param = {
                    name: name,
                    email: email,
                    comment: contact,
                };
                doPost(url, param, function () {
                    console.log("post Success")
                })
            },
        }
    })
</script>